
<template>
  <div v-show="showQr">
    <!--<div class="login" @click="closeLogin" >-->
      <!--<div class="overflow"></div>-->
      <!--<section class="loginWrap">-->
        <!--<div class="loginBox">-->
          <!--&lt;!&ndash; <p class="word">微信扫码登录</p> &ndash;&gt;-->
          <!--<iframe style="width:100%;height: 100%;border: none" :src="urlCode"></iframe>-->
          <!--&lt;!&ndash; <img src="./../../static/img/二维码.png" alt=""> &ndash;&gt;-->
          <!--&lt;!&ndash; <h5>打开手机微信 扫一扫登录</h5> &ndash;&gt;-->
        <!--</div>-->
      <!--</section>-->
    <!--</div>-->

    <div class="login_i" >
      <div class="overflow"></div>
      <section class="loginWrap">
        <div class="loginBox">
          <!--<img style="width:100%;height: 100%;border: none" :src="urlCode">-->
          <div class="errorWrap">
            <span class="icon-error" @click="closeLogin"></span>
          </div>
          <div class="logo">
            <span class="icon-notice"></span>
          </div>
          <div class="goWechat">请复制此链接在微信中打开登录</div>
        </div>
      </section>
    </div>

    <div class="login_container" @click="closeLogin" >
      <div class="overflow" @click="closeLogin"></div>
      <div id="login_container">

      </div>
  </div>

  </div>

</template>

<script>
  import Bus from '../assets/bus'

export default {
  data() {
    return {
      urlCode: '',
      isLogin: false,
      showQr:true,
      userInfo: {

      }
    }
  },
  components: {

  },
  methods: {
    closeLogin() {
//      Bus.$emit('getTarget', event.target);
//      Bus.$emit('showLogin', false)
      this.$emit('showLogin', false)
    },
    getCodeByWechat() {
      let code = this.$utils.getUrlKey("code");
//      console.info(code);
      //如果code已获得,到自己平台授权,获得用户信息
      if (code != '' && code != undefined && code != 'undefined') {
        this.$service('/api/WeChat/StudentAuthorizeByQrcode?code=' + code, 'get', {}).then((response) => {
          //        this.$toast.hideLoading(loading)
//          console.log(response)

          var userInfos = {
            info: {
            },
            name: "userInfo"
          }
          this.userInfo = response.Data;
          userInfos.info = response.Data;
//          console.log(userInfos)
          this.$bw.addStorage(userInfos);


          //这里开始成功回调

          Bus.$emit('showNameFn',true)
          Bus.$emit('closeNameFn',false)
          Bus.$emit('getUserInfo',response.Data)

          var url =window.location.href;

            var urlArray=url.split("?")[1].split('&');
            for (var i =0;i<urlArray.length;i++){
              if(urlArray[i].indexOf("code=")>-1){
                url=url.replace(urlArray[i],'?1=1')
              }
            }

          window.location.href=url;
        }).catch(err => {
          console.log(err);
          //this.fullscreenLoading=false;
        })
      } else {
        var userinfo = this.$bw.getStorage("userInfo");
//        if (userinfo) {
//          this.isLogin = true;
//          this.userInfo = userinfo;
//          return;
//        }

        var len = 16;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (var i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
//        this.urlCode = 'https://open.weixin.qq.com/connect/qrconnect?appid=wxe2b17020429d117f&redirect_uri=' + escape(window.location.href.indexOf('www.')>-1?window.location.href:window.location.href.replace('http://','http://www.')) + '&response_type=code&scope=snsapi_login&state=' + pwd + '#wechat_redirect';
//        console.info(WxLogin)
        var obj = new WxLogin({
          id:"login_container",
          appid: "wxe2b17020429d117f",
          scope: "snsapi_login",
          redirect_uri: window.location.href,
          state: pwd,
    //    style: "",
    //    href: ""
        });
        //定时器循环是否已获得微信code
        setInterval(() => {
          var code2 = this.$utils.getUrlKey("code");
          //如果code已获得
          if (code2 != '' && code2 != undefined && code2 != 'undefined') {
            //刷新页面 从新进入自己平台授权
            this.showQr = false
//            setTimeout(window.location.reload(),200)
            window.location.reload();
//            this.$router.push({ path: '/index'})
          }
        }, 500)
      }
    },
    randomString(len) {
      len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = '';
      for (i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    }
  },
  created(){
//    var obj = new WxLogin({
//      id:"login_container",
//      appid: "wxe2b17020429d117f",
//      scope: "snsapi_login",
//      redirect_uri: window.location.href,
//      state: "",
////    style: "",
////    href: ""
//    });
  },
  mounted() {
    this.getCodeByWechat();
  },

}
</script>

<style rel="styleesheet" lang="less">
  @media screen and (min-width: 829px){
    .login_i{
      display: none;
    }
    .login_container{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
    .overflow {
      width: 100%;
      height: 100%;
      background-color: #020C18;
      opacity: 0.3;
      z-index: 99;
    }
    #login_container{
      position: absolute;
      top:0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 400px;
      height: 400px;
      text-align: center;
      background-color: white;
    }
    .login {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      .overflow {
        width: 100%;
        height: 100%;
        background-color: #020C18;
        opacity: 0.3;
        z-index: 99;
      }
      .loginWrap {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        .loginBox {
          margin-top: 1rem;
          width: 36rem;
          height: 34rem;
          position: relative;
          background-color: #FFFFFF;
          border-radius: 3px;
          p {
            position: absolute;
            color: #333333;
            font-size: 1.8rem;
            left: 3.2rem;
            top: 2.4rem;
            font-weight:bold;
          }
          img {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
          h5 {
            width: 100%;
            color: #666666;

            position: absolute;
            bottom: 5rem;
            text-align: center;
          }
        }
      }
    }
  }

  @media screen and (max-width: 829px){
    .login{
      display: none;
    }
    .login_i {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      .overflow {
        width: 100%;
        height: 100%;
        background-color: #020C18;
        opacity: 0.3;
        z-index: 99;
      }
      .loginWrap {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        .loginBox {
          margin-top: 1rem;
          width: 5.5rem;
          /*height: 4.76rem;*/
          height: 3.06rem;
          /*width: auto;*/
          position: relative;
          background-color: #FFFFFF;
          border-radius: .2rem;
          .errorWrap{
            float: right;
            margin-top: 0.1rem;
            margin-right: 0.15rem;
          }
          .logo{
            text-align: center;
            margin-top: .5rem;
            height: 1rem;
            .icon-notice{
              color: #fd9d40;
              font-size: 1rem;
            }
          }
          .goWechat{
            height: 1rem;
            text-align: center;
            margin-top: 0.5rem;
          }
          /*p {*/
            /*position: absolute;*/
            /*color: #333333;*/
            /*font-size: .25rem;*/
            /*left: .45rem;*/
            /*top: 0.34rem;*/
            /*font-weight:bold;*/
          /*}*/
          /*img {*/
            /*display: block;*/
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            /*right: 0;*/
            /*bottom: 0;*/
            /*margin: auto;*/
            /*!*width: 3rem;*!*/
            /*!*height: 3rem;*!*/
          /*}*/
          /*h5 {*/
            /*width: 100%;*/
            /*color: #666666;*/
            /**/
            /*position: absolute;*/
            /*bottom: .7rem;*/
            /*text-align: center;*/
          /*}*/
        }
      }
    }
  }

</style>
